<template>
  <div>
    <vCommonPage :title="$route.query.pageTitle">
      <div slot="customContent">
        <!-- start:自定义页面内容 -->
        <div class="wrap" :style="sceneid==='sstbg'?'height:640px;':''">
          <el-container>
            <el-main>
              <div>
                <el-table :data="queryInfo" style="width: 100%">
                  <el-table-column prop="deptName" label="就诊科室"></el-table-column>
                  <el-table-column prop="doctorName" label="就诊医生"></el-table-column>
                  <el-table-column prop="admDate" label="就诊日期"></el-table-column>
                  <el-table-column prop="fee" label="费用总额"></el-table-column>
                  <el-table-column width="180" label="操作">
                    <template slot-scope="scope">
                      <el-button @click="detail(scope.row)" type="primary" size="middle">详情</el-button>
                      <el-button @click.once="payItem(scope.row)" type="success" size="middle">支付</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-main>
          </el-container>
          <el-footer>
            <el-row>
              <el-col :span="12">
                <div class="total-item">共{{listTotal}}项</div>
              </el-col>
              <el-col :span="8">
                <div class="amount-money">
                  共计
                  <span>{{listAmount}}</span>元
                </div>
              </el-col>
              <!-- <el-col :span="4"><el-button type="success" @click="payAll">全部支付</el-button></el-col> -->
            </el-row>
          </el-footer>
          <el-drawer title="费用明细" :visible.sync="showDetail" size="80%" direction="rtl">
            <el-container>
              <el-main>
                <div>
                  <el-table :data="queryDetail.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%">
                    <el-table-column prop="itemName" label="项目名称"></el-table-column>
                    <el-table-column prop="itemSum" label="项目金额"></el-table-column>
                    <el-table-column prop="itemQty" label="项目数量"></el-table-column>
                    <el-table-column prop="itemUnit" label="项目单位"></el-table-column>
                    <el-table-column prop="itemPrice" label="项目单价"></el-table-column>
                    <el-table-column prop="execDept" label="执行科室"></el-table-column>
                  </el-table>
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="pageSize"
                    layout="total, prev, pager, next"
                    :total="queryDetail.length"
                  ></el-pagination>
                </div>
              </el-main>
            </el-container>
            <el-footer>
              <el-row>
                <el-col :span="12">
                  <div class="total-item">共{{ detailTotal }}项</div>
                </el-col>
                <el-col :span="8">
                  <div class="amount-money">
                    共计
                    <span>{{ detailAmount }}</span>元
                  </div>
                </el-col>
                <el-col :span="4">
                  <el-button type="success" @click.once="payDetail">支付</el-button>
                </el-col>
              </el-row>
            </el-footer>
          </el-drawer>
        </div>
        <vUser />
        <!-- end:自定义页面内容 -->
      </div>
    </vCommonPage>
  </div>
</template>
<script>
import { commonPost } from "@api/data";
import { MedInsBillConformTrade } from "@js/MIBillConform"
export default {
   mixins: [MedInsBillConformTrade],
  data() {
    return {
      sceneid:this.$store.state.terminfo.seceninfo.sceneid,
      handleList: [],
      currentPage: 1,
      pageSize: 6,
      queryInfo: [], // 页面加载时请求回来的缴费清单
      showDetail: false, // 显示费用详情标志
      detailList:[],
      queryDetail: [], // 详情内容
      grouplist: [], //组合信息
      recipelInfo: {} // 处方信息，用于存储store和支付流程
    };
  },
  components: {},
  /*
*门诊交费
*/
  mounted() {
       this.query();
  },
  methods: {
    query() {
      let data = {};
      data.url = "/api/GetMedicalRecords";
      data.payload = {
        beginDate: "",
        cardNo: this.$store.state.user.userinfo.cardNo,
        cardType: this.$store.state.user.userinfo.cardType,
        endDate: "",
        patientId: this.$store.state.user.userinfo.patientId,
        termId: this.$store.state.terminfo.terminfo.termId,
        hisOperNo: this.$store.state.terminfo.terminfo.hisOperNo,
      };
      commonPost(data).then(res => {
        this.queryInfo = res.data.list;
        this.$store.dispatch("recipel/updateinvoiceNo", res.data.invoiceNo);//his发票id，需要缴费接口回传
      });
    },
    //查询明细
    detail(row) {
       this.$store.dispatch("recipel/updateRecordsInfo", row);
      let data = {};
      data.url = "/api/GetMedicalBillInfo";
      data.payload = {
        admRowId: row.admRowId,
        cardNo: "",
        cardType: "",
        patientId: this.$store.state.user.userinfo.patientId,
        termId: this.$store.state.terminfo.terminfo.termId,
        hisOperNo: this.$store.state.terminfo.terminfo.hisOperNo,
      };
      commonPost(data).then(res => {

        if(row.admRowId!=res.data.admRowId){
        this.$alert("抱歉，系统内部错误，请重试", "提示：", {
          confirmButtonText: "确定",
          callback: action => {
            if (action == "confirm" || action == "cancel") {
              this.$store.commit("alteruserinfo", "");
              this.$router.push({ name: "home" });
            }
          }
        });
        }
        this.detailList=res.data;
        this.grouplist = res.data.Grouplist;
        this.queryDetail = res.data.Itemlist;
        this.showDetail = true;
      });
    },
    //预结算--》获取费用明细拿到需要结算的数据
    preRecipel(row) {
      let data = {};
      data.url = "/api/GetMedicalBillInfo";
      data.payload = {
        admRowId: row.admRowId,
        cardNo: "",
        cardType: "",
        patientId: this.$store.state.user.userinfo.patientId,
        termId: this.$store.state.terminfo.terminfo.termId,
        hisOperNo: this.$store.state.terminfo.terminfo.hisOperNo,
      };
      commonPost(data).then(res => {
          this.detailList=res.data;
        if(row.admRowId!=res.data.admRowId){
        this.$alert("抱歉，系统内部错误，请重试", "提示：", {
          confirmButtonText: "确定",
          callback: action => {
            if (action == "confirm" || action == "cancel") {
              this.$store.commit("alteruserinfo", "");
              this.$router.push({ name: "home" });
            }
          }
        });
        }
           this.beforePay(this.detailList);
      });
    },
    //支付之前判断
    beforePay(res){
          this.$store.dispatch("recipel/updateBillInfo", res);
          this.$store.dispatch("route/updatePreStageEnd", "mzjs");
          var chargeType=this.$store.state.user.userinfo.chargeType;
           console.log("billinfo="+this.$store.state.recipel.billinfo);
           console.log("chargeType="+chargeType);//=3是医保患者，
          if(parseInt(chargeType)!=3){//非医保患者直接到支付中心
             //自费患者支付金额是该条的费用总金额
              this.$store.dispatch('user/updateuserpay', res.fee);
              this.$router.push({ name: "payments", query: { from: "mzjs" } });
          }
          else{//医保患者要先进行医保处理，市医保
            this.CMIUpFee();
          }
    },
    // 全部支付 暂时未用到
    payAll() {
      this.recipelInfo.item = this.queryInfo.map(item => {
        return item.DeptName;
      });
      this.recipelInfo.amount = this.listAmount;
      this.$store.dispatch("route/updatePreStageEnd", "mzjs");
      this.$store.dispatch("recipel/updateRecipelInfo", this.recipelInfo);
      this.preRecipel();
    },
    // 单项支付
    payItem(row) {
        this.$store.dispatch("recipel/updateRecordsInfo", row);
        console.log("records="+this.$store.state.recipel.records);
        this.preRecipel(row);
    },
    // 详情中分开支付
    payDetail() {
        // this.$store.dispatch("recipel/updateBillInfo",this.detailList);
        // this.$store.dispatch("route/updatePreStageEnd", "mzjs");
        // this.$router.push({ name: "payments", query: { from: "mzjs" } });
          this.beforePay(this.detailList);
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    // 当前页
    handleCurrentChange(val) {
      this.currentPage = val;
    }
  },
  computed: {
    listTotal() {
      return this.queryInfo.length;
    },
    listAmount() {
      let amount = 0;
      this.queryInfo.map(item => {
        amount += parseFloat(item.fee);
      });
      return amount.toFixed(2);
    },
    detailTotal() {
      return this.queryDetail.length;
    },
    detailAmount() {
      let amount = 0;
      this.queryDetail.map(item => {
        amount += parseFloat(item.itemSum);
      });
      return amount.toFixed(2);
    }
  }
};
</script>

<style scoped>
.wrap {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background: #fff;
}
.total-item {
  line-height: 42px;
  padding-left: 10px;
  color: #666;
}
.amount-money {
  font-size: 24px;
  line-height: 42px;
}
.amount-money span {
  color: #ee3333;
}
</style>
